import {
  AlertOutlined,
  WifiOutlined,
  ThunderboltOutlined,
  MonitorOutlined,
} from "@ant-design/icons";
import {
  Battery,
  SpeedGauge,
  Video,
  DirControler,
  DeviceInfo,
} from "@/components";
import moment from "moment";
import { useState, useEffect } from "react";
import { Button } from "antd";
import { CaretUpOutlined, ChromeOutlined } from "@ant-design/icons";
import { getCameraList } from '@/api/camera';

import "./index.css";

export default function Control() {
  const video = {
    type: "flv",
    url: "http://localhost:3030/stream.flv",
  };

  const [time, setTime] = useState(moment().format("YYYY-MM-DD HH:mm:ss"));
  useEffect(() => {
    const timer = setInterval(() => {
      const currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
      setTime(currentTime);
    });
    return () => {
      clearInterval(timer);
    };
  }, []);

  const deviceInfo = [
    {
      title: "气溶胶检测",
      items: [
        {
          name: "a浓度",
          value: "0.0",
        },
        {
          name: "泵状态",
          value: "停",
        },
      ],
    },
    {
      title: "气溶胶检测",
      items: [
        {
          name: "a浓度",
          value: "0.0",
        },
        {
          name: "泵状态",
          value: "停",
        },
      ],
    },
    {
      title: "气溶胶检测",
      items: [
        {
          name: "a浓度",
          value: "0.0",
        },
        {
          name: "泵状态",
          value: "停",
        },
      ],
    },
  ];


  const [cameraList, setCameraList] = useState([]);
  
  useEffect(() => {
    getCameraList().then(setCameraList)
  }, [])

  const className =
    "grid gap-4 px-4 py-2 rounded-lg flex items-center text-white";

  return (
    <div className="size-full border-2 border-rose-500 flex flex-col">
      <div className="flex absolute top-0 left-0 right-0 p-6 z-10">
        <div className="size-3/12">
          <Video
            className="rounded-lg border-slate-400"
            url={`http://localhost:3030/api/v1/stream.flv/1722994250992`}
            type={video.type}
          />
        </div>
        <div className="flex-1 text-white text-3xl text-center">{time}</div>
        <div className="size-3/12">
          <Video
            className="rounded-lg border-slate-400"
            url={`http://localhost:3030/api/v1/stream.flv/1722994250992`}
            type={video.type}
          />
        </div>
      </div>
      <Video url={`http://localhost:3030/api/v1/stream.flv/1722994250992`} type={video.type} />

      <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 h-60 flex z-10">
        <div className="w-2/5 p-2 grid grid-cols-2 gap-4">
          <div
            className="text-white rounded-lg p-2 px-4 inline-block"
            style={{ background: "#14142B" }}
          >
            <div
              className="font-bold text-md mb-2"
              style={{ color: "#5A5A89" }}
            >
              表面污染监测<small>(Bq/cm2)</small>
            </div>
            <div className="flex flex-row gap-6">
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>
                    αβ浓度
                  </div>
                  <div className="font-bold text-md">0.00E+0</div>
                </div>
              </div>
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>β浓度</div>
                  <div className="font-bold text-md">α0.00E+0</div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="text-white rounded-lg p-2 px-4  inline-block"
            style={{ background: "#14142B" }}
          >
            <div
              className="font-bold text-md mb-2"
              style={{ color: "#5A5A89" }}
            >
              表面污染监测<small>(Bq/cm2)</small>
            </div>
            <div className="flex flex-row gap-6">
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>
                    αβ浓度
                  </div>
                  <div className="font-bold text-md">0.00E+0</div>
                </div>
              </div>
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>β浓度</div>
                  <div className="font-bold text-md">α0.00E+0</div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="text-white rounded-lg p-2 px-4  inline-block"
            style={{ background: "#14142B" }}
          >
            <div
              className="font-bold text-md mb-2"
              style={{ color: "#5A5A89" }}
            >
              表面污染监测<small>(Bq/cm2)</small>
            </div>
            <div className="flex flex-row gap-6">
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>
                    αβ浓度
                  </div>
                  <div className="font-bold text-md">0.00E+0</div>
                </div>
              </div>
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>β浓度</div>
                  <div className="font-bold text-md">α0.00E+0</div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="text-white rounded-lg p-2 px-4  inline-block"
            style={{ background: "#14142B" }}
          >
            <div
              className="font-bold text-md mb-2"
              style={{ color: "#5A5A89" }}
            >
              表面污染监测<small>(Bq/cm2)</small>
            </div>
            <div className="flex flex-row gap-6">
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>
                    αβ浓度
                  </div>
                  <div className="font-bold text-md">0.00E+0</div>
                </div>
              </div>
              <div className=" flex flex-row items-center gap-2">
                <div>
                  <ChromeOutlined style={{ fontSize: "32px" }} />
                </div>
                <div>
                  <div style={{ color: "rgba(255, 255, 255, 0.7)" }}>β浓度</div>
                  <div className="font-bold text-md">α0.00E+0</div>
                </div>
              </div>
            </div>
          </div>

          {/* {deviceInfo.map((item) => {
            return (
              <DeviceInfo
                title={item.title}
                className={"grid-cols-2 gap-2 text-white"}
                children={item.items.map((ele) => {
                  return (
                    <>
                      <div>
                        <p>{ele.name}</p>
                        <p>
                          {ele.value} <CaretUpOutlined />
                        </p>
                      </div>
                    </>
                  );
                })}
              ></DeviceInfo>
            );
          })} */}
        </div>
        <div className="w-1/5">
          {/* <Battery /> */}
          <SpeedGauge className="h-full" value={56} width={10} />
        </div>
        <div className="w-2/5 flex flex-row gap-4 p-2">
          <div
            className={className + " grid-cols-2 flex-1"}
            style={{ background: "#14142B" }}
          >
            <Button shape="round" className="col-span-2 h-2/3 btn">
              遥控模式
            </Button>
            <Button shape="round" className="h-2/3 btn">
              一档
            </Button>
            <Button shape="round" className="h-2/3 btn">
              二挡
            </Button>
            <Button shape="round" className="h-2/3 btn">
              三档
            </Button>
            <Button shape="round" className="h-2/3 btn">
              四挡
            </Button>
          </div>
          <div
            className={className + " grid-cols-1 flex-1"}
            style={{ background: "#14142B" }}
          >
            <Button shape="round" className="h-2/3 btn">
              一键展开
            </Button>
            <Button shape="round" className="h-2/3 btn">
              一键收回
            </Button>
            <Button shape="round" className="h-2/3 btn">
              一键冲淋
            </Button>
          </div>
          <div className="flex-1 flex items-center justify-center">
            <div
              className="text-white rounded-lg p-2 px-4 inline-block"
              style={{ background: "#14142B" }}
            >
              <DirControler></DirControler>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
